<template>
  <view class="page">
    <view class="page-hd">
      <SearchBox placeholder="搜索商品名称、编号、规格、条码"></SearchBox>
    </view>
    <view class="page-bd">
      <ScrollMenu
        type="customItem"
        v-model="current"
        @selected="handleSelect"
        :data="classifyData"
      >
      <template #default="item">
        <view class="product-list">
          <ProductInfoView
            type="custom"
            :data="{operateType: 'custom'}"
            @onAdd="handleAdd"
            @onInput="handleInput"
            @onEdit="handleEdit"
          >
            <template #operate="data">
              <!-- <view @tap="handleCheckbox(data)">多选</view> -->
               <view class="up-checkbox-cover">
                 <up-checkbox
                   :customStyle="{marginBottom: '8px'}"
                   label=""
                   shape="circle"
                   name="agree"
                   usedAlone
                   v-model:checked="aloneChecked"
                   @change="(n)=>handleCheckboxChange(n, data)"
                 >
                 </up-checkbox>
               </view>
            </template>
          </ProductInfoView>
        </view>
      </template>
      </ScrollMenu>
    </view>
    <view class="ui-line"></view>
    <view class="page-ft">
      <view class="info">
        <text class="iconfont icon-a-32_32_bag"></text>
        <text class="text">共盘点2种，28个</text>
      </view>
      <view class="buttons-wrap">
        <view class="ui-button button-style--primary" @click="handleSubmit"
          >选好了</view
        >
      </view>
    </view>


  </view>
</template>

<script setup>
import SearchBox from '@/components/base-components/search-box/search-box.vue';
import ScrollMenu from '@/components/base-components/scroll-menu/scroll-menu.vue';
// import ListItemView from '@/components/base-components/list-item-view/list-item-view.vue';
import classifyData from "@/mock/scrollMenu.data";
import ProductInfoView from '@/components/base-components/product-info-view/product-info-view.vue';
import {ROUTE} from '@/constant/constant'

const showModal = ref(false);

const handleTest = (data) => {
  console.log("🚀 ~ handleTest ~ data:", data)
}

// 添加
const handleAdd = (d) => {
  showModal.value = true;
}

// 编辑
const handleEdit = (d) => {
  console.log("🚀 ~ handleEdit ~ d:", d)
}

// 录入
const handleInput = (d) => {
  console.log("🚀 ~ handleInput ~ d:", d)
  proxy.$tab.navigateTo(ROUTE.PAGE_APPS.INPUT);

}

// 多选
const handleCheckbox = (d) => {
  console.log('handleCheckbox', d);
}

const handleCheckboxChange = (n, d) => {
  console.log('handleCheckboxChange', n, d);
}

// 弹窗确认添加商品
const handleModalAddProduct = (data) => {
  console.log("🚀 ~ 页面handleModalAddProduct ~ data: 确认添加商品", data);
}


</script>

<style scoped lang="scss">
@import "@/static/scss/theme.scss";


.page {
  height: 100vh;
  background-color: #F4F8FB;
  display: flex;
  flex-direction: column;


  &-hd {
    padding: 16rpx 32rpx;
    background-color: #fff;
  }

  &-bd {
    flex: 1;
    margin-top: 20rpx;
    overflow: hidden;
  }

  ::v-deep {
    .card-view {
      padding: 0 32rpx;
    }
    .form-item-view {
      justify-content: space-between;
      height: 96rpx;
      font-size: 26rpx;
      display: flex;
      align-items: center;

      & + .form-item-view {
        border-top: 1px solid $border-color;
      }
    }
  }

  &-ft {
    display: flex;
    height: 150rpx;
    padding: 20rpx 24rpx;
    // align-items: center;
    justify-content: space-between;
    border-top: 1rpx solid $border-color;

    .info {

      color: $text-l3-color;
      font-size: 28rpx;
    }
  }

  .product-list {
    margin: 24rpx 32rpx;
  }

}
</style>
